<template>
  <div>
    <img class="top" src="@/assets/mendian.png" alt="" />

    <div class="my_info">
      <van-image
        class="img1"
        round
        width="100px"
        height="100px"
        :src="avatar"
      />
      <div class="username">{{ username }}</div>
      <div class="edit">编辑个人信息</div>
      <van-button
        v-if="token"
        size="mini"
        class="login"
        round
        type="primary"
        @click="getOut"
        >退出登录</van-button
      >
      <van-button
        v-else
        size="small"
        class="login"
        type="primary"
        @click="$router.push('/login')"
        >去登录</van-button
      >
    </div>

    <van-grid class="banner" :column-num="3" :border="false" clickable>
      <van-grid-item icon="star-o" text="我的收藏" @click="have('/collect')" />
      <van-grid-item icon="wap-home-o" text="我的出租" @click="have('/manageHouse')" />
      <van-grid-item icon="clock-o" text="看房记录" />
      <van-grid-item icon="shop-collect-o" text="成为房主" />
      <van-grid-item icon="user-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <img
      class="last"
      src="http://liufusong.top:8080/img/profile/join.png"
      alt=""
    />
  </div>
</template>

<script>
import { getToken, removeToken } from '@/utils/storage'
import { getUserInfo } from '@/api/user'
import { Dialog } from 'vant'
export default {
  name: 'My',
  async created() {
    this.token = getToken()
    const res = await getUserInfo()
    this.username = res.body.nickname
    this.avatar += res.body.avatar
  },
  data() {
    return {
      token: null,
      username: '',
      avatar: 'http://liufusong.top:8080',
    }
  },
  methods: {
    getOut() {
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出',
        confirmButtonColor:'#108ee9'
      })
        .then(() => {
          // on confirm
          removeToken()
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    have(go){
      if(this.token){
        this.$router.push(go)
      }else{
         Dialog.confirm({
        title: '提示',
        message: '您还没有登录，是否登录',
        confirmButtonColor:'#108ee9'
      })
        .then(() => {
          // on confirm
         
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
      }
    }
  },
}
</script>

<style scoped lang="less">
.top {
  width: 375px;
  height: 210px;
}
.my_info {
  display: flex;
  justify-content: center;

  position: absolute;
  left: 12px;
  top: 100px;
  width: 350px;
  height: 165px;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  .login {
    position: absolute;
    bottom: 60px;
  }
  .img1 {
    position: absolute;
    top: -50px;
  }
  .username {
    position: absolute;
    top: 50px;
  }
  .edit {
    position: absolute;
    top: 120px;
    color: #999;
    font-size: 12px;
  }
}
.banner {
  margin-top: 80px;
}
.last {
  margin-top: 20px;
  margin-left: 7px;
  width: 360px;
  height: 93px;
}
</style>
